<template>
    <div>
        <!-- <h1>我是学生管理页面</h1> -->
        <!-- <table>
            <thead>
                <tr>
                    <th>学生姓名</th>
                    <th>学生性别</th>
                    <th>身份证号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in curPageData" :key="item.stuid">
                    <td>{{item.stuName}}</td>
                    <td>{{item.stuSex}}</td>
                    <td>{{item.stuid}}</td>
                    <td>
                        <button class="caoZuoBtn deleBtn btn btn-sm btn-warning btn-primary" @click="deleCurData(item.stuid)">删除</button>
                        <button class="caoZuoBtn editBtn btn btn-sm btn-warning btn-primary" @click="editCurData(item)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table> -->
        <el-button size="mini" type="danger" @click="dialogFormNewVisible=true">新增</el-button>
        <el-table :data="curPageData" header-row-class-name="headClass" style="width: 100%">            
            <el-table-column prop="stuName" label="学生姓名" width="180"></el-table-column>
            <el-table-column prop="stuSex" label="学生性别" width="180"></el-table-column>
            <el-table-column prop="stuid" label="身份证号"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope"><!-- scope中保存的是当前这一行的信息 -->
                    <!-- <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button> -->
                    <el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="tableData.length" :current-page='curPage' @current-change="changePage"></el-pagination>
        <!-- 修改弹框 -->
        <el-dialog title="学生信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="curEditPage">
                <el-form-item label="学生姓名" :label-width="formLabelWidth">
                    <el-input v-model="curEditPage.stuName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生性别" :label-width="formLabelWidth">
                    <el-select v-model="curEditPage.stuSex" placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="curEditPage.stuid" autocomplete="off" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="afterEditData(curEditPage)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增弹框 -->
        <el-dialog title="新增学生信息" :visible.sync="dialogFormNewVisible" width="30%">
            <el-form :model="newstuform">
                <el-form-item label="学生姓名" :label-width="formLabelWidth">
                    <el-input v-model="newstuform.stuName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生性别" :label-width="formLabelWidth">
                    <el-select v-model="newstuform.stuSex" placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="newstuform.stuid" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormNewVisible = false">取 消</el-button>
                <el-button type="primary" @click="addData(newstuform.stuName,newstuform.stuSex,newstuform.stuid)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// import axios from 'axios'  //在main.j中已经在所有Vue实例中添加了axios原型对象，所有这句可以省略了
import * as api from '../utils/api'
export default {
    name:'Stu',
    data() {
        return {
            tableData:[],
            curPage:1,
            sample_modal:false,
            curEditPage:{
                stuid:'',
                stuName:'',
                stuSex:''
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            newstuform:{
                stuid:'',
                stuName:'',
                stuSex:''
            },
            dialogTableNewVisible: false,
            dialogFormNewVisible: false,
        }
    },
    computed: {
        // 渲染当前页面
        curPageData(){
            let curPageData = this.tableData.slice((this.curPage-1)*10,(this.curPage-1)*10+10)
            // console.log(curPageData);
            return curPageData
        },
        pageNum(){
            return Math.ceil(this.tableData.length/10)
        }
    },
    created() {
        this.axios({
            url:api.GET_STUDENT,
            method:'get',
            parmas:{
                stuid: 1
            }
        }).then(data=>{
            // console.log(data);
            let getData = data.data.data
            this.tableData = getData
        }).catch(err=>{
            console.log(err);
        })       
    },
    methods: {
        changePage(num){
            console.log(num);
            this.curPage = num
        },
        // toPrevPage(){
        //     this.curPage<=1 ? this.curPage=1 : this.curPage--
        // },
        // toNextPage(){
        //     this.curPage>=this.pageNum ? this.curPage=this.pageNum : this.curPage++
        // },
        // deleCurData(curId){
        //     // console.log(curId);
        //     // 向后台发起ajax请求 删除当前stuid===curId的数据 再返回删除后的数据库
        //     this.tableData.forEach((item,i) => {
        //         if(item.stuid === curId){
        //             this.tableData.splice(i,1)
        //         }
        //     });
        // },
        deleteRow(index, row){
            console.log(index,row);
            this.tableData.forEach((item,i)=>{
                if(item.stuid === row.stuid){
                    this.tableData.splice(i,1)
                }
            })
        },
        // editCurData(cur){
        //     this.sample_modal = true
        //     this.tableData.forEach(item=>{
        //         if(item.stuid === cur.stuid){
        //             // this.curEditPage = item//将地址赋值给了curEditPage
        //             this.curEditPage.stuid = item.stuid//将地址里面的值赋值给了curEditPage
        //             this.curEditPage.stuName = item.stuName
        //             this.curEditPage.stuSex = item.stuSex
        //         }
        //     })
        // },
        handleEdit(index, row) {
            // console.log(index, row);
            this.dialogFormVisible = true
            this.tableData.forEach(item=>{
                if(item.stuid === row.stuid){
                    // this.curEditPage = item//将地址赋值给了curEditPage
                    this.curEditPage.stuid = item.stuid//将地址里面的值赋值给了curEditPage
                    this.curEditPage.stuName = item.stuName
                    this.curEditPage.stuSex = item.stuSex
                }
            })
        },
        afterEditData(cur){
            this.tableData.forEach(item=>{
                if(item.stuid === cur.stuid){
                    // item.stuid = cur.stuid
                    item.stuName = cur.stuName
                    item.stuSex = cur.stuSex
                    this.dialogFormVisible = false
                }
            })
        },
        editPageHide(){
            this.sample_modal = false
        },
        addData(sName,sex,sId){
            let newStu = {stuid:'',stuName:'',stuSex:''}
            if(sName && sex && sId){
                newStu = {stuid:sId,stuName:sName,stuSex:sex}
                this.tableData.unshift(newStu)
                this.dialogFormNewVisible = false
                this.newstuform.stuid = ''
                this.newstuform.stuName = ''
                this.newstuform.stuSex = ''
            }else{
                this.$message('请正确填写学生信息！！！')
            }
        }
    },
}
</script>
<style lang="less" scoped>
</style>